import React, { Form, Input, Button } from 'antd';
import { useHistory } from 'ice';

import store from '@/store';

import logopng from './img/logo.png';
import titlepng from './img/title.png';
import './index.scss';
import JSEncrypt from 'jsencrypt';
export default function Login() {
  const history = useHistory();
  const { logout, setUserInfo } = store.useModelDispatchers('user');

  const [logForm] = Form.useForm();

  const onFinish = (values: any) => {
    // 备注登录修改（把下面两行删掉再解开后面即可）
    setUserInfo({});
    history.replace('/DeviceController/ProjectManagement');

    // 登录请求
    // getPublicKeyStr().then((res) => {
    //   if (res.data) {
    //     let pss = new JSEncrypt();
    //     pss.setPublicKey(res.data.publicKeyStr);
    //     let psss = pss.encrypt(logForm.getFieldValue('password'));
    //     loginUser({ ...values, password: psss }).then((res) => {
    //       if (res.code == 0) {
    //         setUserInfo(res.data);
    //         history.replace('/director');
    //       }
    //       logForm.resetFields();
    //     });
    //   }
    // });
  };

  const handleLoginVistor = () => {
    logout();
    history.replace('/');
  };

  const onFinishFailed = (errorInfo: any) => {};

  return (
    <div className="logDiv justify-between h-full p-2rem pl-3.49rem pt-4.29rem pr-0 ">
      <div className="flex felx-row text-1.5rem space-x-0.1rem flex-row w-1/2 max-w-1/2 h-1/13 top-2rem">
        <img src={logopng} alt="logo"></img>
        <img src={titlepng} alt="logo"></img>
      </div>
      <div className="flex flex-row-reverse  items-center justify-center h-full w-full  pl-28rem  ">
        <div className="logbg ">
          <div className="flex flex-col flex-grow item-center space-y-1rem   border-1 h-91 p-30px  h-full w-full">
            <div className="flex justify-between item-center children:space-x-1em items-center h-1/5 pb-10 ">
              <span className="text-24px font-extralight  text-[#ffffff]">{'登录'}</span>
            </div>
            <div className="h-full">
              <Form
                // name="basic"
                className="inputBG space-y-2rem"
                labelCol={{ flex: '6.5rem' }}
                form={logForm}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item label="" name="userName" rules={[{ required: true, message: '请输入用户名称' }]}>
                  <Input placeholder="请输入用户名" className="h-3.5em placeholder-[#9E9E9E] " />
                </Form.Item>

                <Form.Item
                  label=""
                  name="password"
                  rules={[{ required: true, message: '请输入正确的密码' }]}
                  className="text-[#9E9E9E]"
                >
                  <Input.Password
                    placeholder="请输入密码"
                    className="h-3.5em text-[#9E9E9E] bg-[#9E9E9E] placeholder-[#9E9E9E] passwordtest"
                  />
                </Form.Item>

                <Form.Item
                  name="tenantId"
                  className=" self-end "
                  style={{ alignSelf: 'top' }}
                  wrapperCol={{ offset: 5, span: 19 }}
                >
                  <div className="text-right text-[#656565] ">{'忘记密码？请联系管理员'}</div>
                </Form.Item>
                <Form.Item className="w-full pb-5rem">
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{ borderRadius: '5px', backgroundColor: '#4BB4FF', paddingBottom: '5px' }}
                    className="w-full h-3.5em  "
                  >
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
